<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证示例</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --error-color: #f44336;
            --success-color: #4CAF50;
        }

        body {
            font-family: 'Segoe UI', system-ui;
            max-width: 600px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        input {
            width: 100%;
            padding: 0.8rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
        }

        input.invalid {
            border-color: var(--error-color);
        }

        .error-list {
            color: var(--error-color);
            padding: 0;
            margin: 0.5rem 0 0;
            list-style: none;
        }

        .password-strength {
            margin-top: 0.5rem;
            font-size: 0.9em;
            color: #666;
        }

        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            transition: opacity 0.3s ease;
        }

        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        @media (max-width: 480px) {
            body {
                margin: 1rem auto;
            }
            
            input {
                padding: 0.6rem;
            }
        }
    </style>
</head>
<body>
    <form id="validationForm" novalidate>
        <div class="form-group">
            <label for="email">电子邮箱：</label>
            <input type="email" id="email" name="email" required 
                   placeholder="example@domain.com"
                   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
            <div class="error-list" aria-live="polite"></div>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required
                   minlength="6" maxlength="20"
                   pattern="^(?=.*[a-z])(?=.*[A-Z]).+$">
            <div class="password-strength">密码强度：<span id="strengthIndicator">弱</span></div>
            <div class="error-list" aria-live="polite"></div>
        </div>

        <div class="form-group">
            <label for="phone">手机号：</label>
            <input type="tel" id="phone" name="phone" required
                   placeholder="13800138000"
                   pattern="^1[3-9]\d{9}$">
            <div class="error-list" aria-live="polite"></div>
        </div>

        <button type="submit" id="submitBtn">提交</button>
    </form>

    <script>
        const form = document.getElementById('validationForm');
        const passwordInput = document.getElementById('password');
        const strengthIndicator = document.getElementById('strengthIndicator');
        const submitBtn = document.getElementById('submitBtn');

        // 密码强度检测
        function checkPasswordStrength(value) {
            const hasLower = /[a-z]/.test(value);
            const hasUpper = /[A-Z]/.test(value);
            const hasNumber = /\d/.test(value);
            const hasSpecial = /[!@#$%^&*]/.test(value);
            
            let strength = 0;
            if (hasLower && hasUpper) strength++;
            if (hasNumber) strength++;
            if (hasSpecial) strength++;
            
            const levels = ['弱', '中', '强', '非常强'];
            return levels[Math.min(strength, levels.length - 1)];
        }

        // 显示字段错误
        function showErrors(input, messages) {
            const errorContainer = input.parentElement.querySelector('.error-list');
            errorContainer.innerHTML = messages.map(msg => 
                `<li role="alert">${msg}</li>`
            ).join('');
        }

        // 表单验证
        function validateField(input) {
            const errors = [];
            
            // HTML5原生验证
            if (input.validity.valueMissing) {
                errors.push('此字段为必填项');
            }
            
            if (input.validity.typeMismatch) {
                errors.push('格式不正确');
            }
            
            if (input.validity.patternMismatch) {
                const msg = {
